<template>
  <div class="cutting-canvas">
    <canvas ref="canvasRef" :width="width" :height="height"></canvas>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import type { Material } from '../types';

const props = defineProps<{
  width: number;
  height: number;
  originalMaterial: Material;
  targetSize: Material;
}>();

const canvasRef = ref<HTMLCanvasElement | null>(null);

onMounted(() => {
  const canvas = canvasRef.value;
  if (!canvas) return;
  
  const ctx = canvas.getContext('2d');
  if (!ctx) return;

  // 绘制原始材料边框
  ctx.strokeStyle = '#333';
  ctx.strokeRect(0, 0, props.originalMaterial.width, props.originalMaterial.height);
});
</script>

<style scoped>
.cutting-canvas {
  border: 1px solid #ccc;
}
</style> 